<template>
  <div class="download">
    <loading v-if="!classData"></loading>
    <nodata v-else-if="!classData.length"></nodata>
    <ul v-else class="item">
      <li v-for="data in classData" :key="data.id" class="li" ref="pbs">
        <div class="list-wrapper">
          <h2 class="label">{{data}}</h2>
          <!-- {{resourceData[data].length}} -->
          <div class="no-data" v-if="!resourceData[data]">此版块暂时没有上传资源，等待上传资源中。。。</div>
          <ul v-else>
            <li
              v-for="res in resourceData[data]"
              :key="res._id"
              class="list"
              @click="gotoUpload(res._id)"
            >
              <img :src="res.imageUrl | squareUrlsResource" alt />
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapActions } from "Vuex";
export default {
  name: "download",
  data() {
    return {
      id: "",
      resourceData: {},
      classData: ""
    };
  },
  mounted() {
    if (this.$route.params.id) {
      this.id = this.$route.params.id;
    } else {
      this.$router.push("/resource/intro");
    }
  },
  watch: {
    $route(pre, now) {
      if (pre.name === "download_id" && now.name === "download_id") {
        this.id = this.$route.params.id;
      }
    },
    id() {
      if (this.id) {
        this.resourceData = {};
        this.classData = "";
        this.initMethods();
      }
    }
  },
  methods: {
    gotoUpload(id) {
      this.$router.push("/upload/" + id);
    },
    async initMethods() {
      let id = this.id;
      await this.getAllResourceData({
        navName: id
      })
        .then(res => {
          let newData = {};
          let data = res.data.data;
          data.resource.forEach(val => {
            if (newData[val.classChild]) {
              newData[val.classChild].push(val);
            } else {
              newData[val.classChild] = [];
              newData[val.classChild].push(val);
            }
          });

          this.classData = res.data.data.class;
          this.resourceData = newData;
        })
        .catch(err => {
          console.log(err);
        });

      function arr(pbs, ROWS, x, that) {
        let imgArr = [];
        for (let i = 0; i < ROWS; i++) {
          pbs[i].style.left = i * (100 / ROWS) + "%";
          imgArr.push(pbs[i].offsetHeight);
        }
        for (let j = 5; j < pbs.length; j++) {
          let min = Math.min.apply(null, imgArr);
          let length = imgArr.indexOf(min);
          pbs[j].style.left = length * (100 / ROWS) + "%";
          pbs[j].style.top = min + "px";
          imgArr[length] += pbs[j].offsetHeight;
        }
        let max = Math.max.apply(null, imgArr);
        let addHeight = that.$refs.pbs[x].getElementsByClassName("label")[0]
          .offsetHeight;
        that.$refs.pbs[x].style.height = max + addHeight + "px";
      }

      let refpbs = this.$refs.pbs;
      if (refpbs) {
        for (let x = 0; x < refpbs.length; x++) {
          let pbs = this.$refs.pbs[x].getElementsByClassName("list");
          let initArray = [];
          const ROWS = 5; // 修改这里的话，还得修改li的width值才能正确的变更每行的显示图片个数
          if (pbs.length > ROWS) {
            let thats = this;
            for (let y = 0; y < pbs.length; y++) {
              pbs[y].getElementsByTagName("img")[0].onload = function() {
                initArray.push(pbs[y].offsetHeight);
                pbs[y].style.position = "absolute";
                arr(pbs, ROWS, x, thats);
              };
            }

            // setTimeout(function time(that = thats) {
            //   if (initArray.length >= pbs.length) {
            //     arr(pbs, ROWS, x, that);
            //   } else {
            //     setTimeout(time, 20);
            //   }
            // }, 0);
          } else {
            for (let y = 0; y < pbs.length; y++) {
              pbs[y].getElementsByTagName("img")[0].onload = function() {
                initArray.push(pbs[y].offsetHeight);
              };
            }
            let thats = this;
            setTimeout(function time(that = thats) {
              if (initArray.length >= pbs.length) {
                for (let i = 0; i < pbs.length; i++) {
                  pbs[i].style.left = i * (100 / ROWS) + "%";
                }
                let max = Math.max.apply(null, initArray);
                let addHeight = that.$refs.pbs[x].getElementsByClassName(
                  "label"
                )[0].offsetHeight;
                that.$refs.pbs[x].style.height = max + addHeight + "px";
              } else {
                setTimeout(time, 20);
              }
            }, 0);
          }
        }
      }
    },
    ...mapActions("user", ["getAllResourceData"])
  }
};
</script>
<style lang="sass" scoped>
@import '@/assets/default.sass'
.download
  width: 100%
  background-color: #fff
  .item
    width: 100%
    padding: 0 2%
    .li
      width: 100%
      .list-wrapper
        width: 100%
        .label
          height: 40px
          line-height: 40px    
          color: #333
          padding-left: 10px
          @include title-before(5px,21px,9px,0,#eb2001)      
        .no-data
          width: 100%
          height: 100px
          padding: 20px
          @include flex(center,center)
        >ul
          width: 100%
          position: relative
          >li
            width: 20%
            padding: 10px
            display: inline-block   
            box-sizing: margin-box     
            cursor: pointer     
            transition: all .5s
            left: 0
            top: 0
            >img
              box-shadow: 2px 2px 2px rgba(0,0,0,.1)
              width: 100%
</style>